import React, { Fragment } from 'react';
import { connect } from 'dva'
import { router } from 'dva';
import styles from './mytag.less';
import { formatTagtime } from '../../utils/utils'
import PageLoading from '../../components/PageLoading/index'

const { Link } = router
class Mytag extends React.Component {
  componentDidMount() {
    const { dispatch } = this.props
    dispatch({
      type: 'tag/getPersonalTags'
    })
    dispatch({
      type: 'tag/getEmployeeInfo'
    })
  }

  render() {

    const { info, personalTags, flag } = this.props
    return (
      <div className={`${styles.bg}`}>
        {flag ? <PageLoading /> :
          <Fragment>
            <div className={styles.textBox}>
              <div className={styles.textContainer}>
                <div><span>Hi, <span className={styles.textColor}> {info.baseUser ? info.baseUser.nickname : ''} </span></span></div>
                <div>
                  <span>有人在</span>
                  <span className={styles.textColor}>{personalTags.latestTag ? formatTagtime(personalTags.latestTag.ctime) : '1月1号00:00'}</span>
                  <span>给你贴了个新标签</span>
                </div>
              </div>
            </div>
            <div className={styles.tagBox}>
              <div className={styles.newtagBtn}>
                <span className={styles.tagbtnText}>{personalTags.latestTag ? personalTags.latestTag.tagName : '新年快乐'}</span>
              </div>
            </div>
            <div className={styles.myTagWall}>
              <div className={styles.tagWallTitle}><span className={styles.tagWallTitleText}>我的标签墙</span></div>
              <div className={` no-swap ${styles.taWallContainer}`}>
                {/* <div  className={styles.tagItem}><span className={styles.tagbtnText}>新年快乐</span></div> */}
                {
                  personalTags.tags ? personalTags.tags.map((item, index) => (
                    <div key={index} className={styles.tagItem}>
                      {
                        item.times > 1 ? <span className={styles.tagTimes}>x{item.times}</span> : ''
                      }
                      <span className={styles.tagbtnText}>{item.tagName}</span></div>
                  )) : ''
                }
                <div className={styles.tagItem_blank}></div>
              </div>
              <div className={styles.footerBox}>
                <Link to="/">
                  <span className={styles.footerText}>点击查看我的年度汇报</span>
                </Link>
              </div>
            </div>
          </Fragment>}
      </div >

    )
  }
}

export default connect(({ tag }) => tag)(Mytag);